<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>音频转码</title>
</head>

<body>
<h5> 请按F12后，看控制台输出。 </h5>

<div>
    <input type="file" id="uploadFile">
    <button onclick="uploadFile()">上传</button>
</div>

<div>

    文件标识: <input type="text" id="fileId" placeholder="first upload file">
    <br/>

    目标格式:
    <select id="audioCodecId">
        <optgroup label="audio codec id">
            <option value="aac" selected>AAC</option>
            <option value="opus">OPUS</option>
            <option value="mp3">MP3</option>
            <option value="wav">WAV</option>
            <option value="g726">G726</option>
            <option value="pcma">PCMA(G711A)</option>
            <option value="pcm">PCM</option>
        </optgroup>
    </select>
    <br/>

    &emsp;采样率:
    <select id="audioSampleRate">
        <optgroup label="audio sample rate">
            <option value="" selected>保持原样</option>
            <option value="8000">8000</option>
            <option value="16000">16000</option>
            <option value="11025">11025</option>
            <option value="22050">22050</option>
            <option value="44100">44100</option>
            <option value="48000">48000</option>
        </optgroup>
    </select>
    <br/>

    &emsp;通道数:
    <select id="channel">
        <optgroup label="audio channel">
            <option value="" selected>保持原样</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </optgroup>
    </select>
    <br/>
    &emsp;比特率:
    <select id="bitRate">
        <optgroup label="audio bit rate">
            <option value="" selected>保持原样</option>
            <option value="8k">8k</option>
            <option value="16k">16k</option>
            <option value="32k">32k</option>
            <option value="48k">48k</option>
            <option value="64k">64k</option>
            <option value="96k">96k</option>
            <option value="112k">112k</option>
            <option value="128k">128k</option>
            <option value="160k">160k</option>
            <option value="192k">192k</option>
            <option value="256k">256k</option>
            <option value="320k">320k</option>
        </optgroup>
    </select>
    <br/>

    <button onclick="audioConvert()">音频转换</button>
    <br/>
</div>

<div id="console"></div>
</body>
</html>

<script>
    if (typeof (EventSource) !== "undefined") {
        window.onload = function () {
            const fileId = localStorage.getItem("fileId")
            document.getElementById('fileId').value = fileId
        }
    } else {
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 server-sent 事件...";
    }
</script>

<script>
    function audioConvert() {
        let audioCodecId = document.getElementById("audioCodecId").value
        let audioSampleRate = document.getElementById("audioSampleRate").value
        let fileId = document.getElementById('fileId').value
        let bitRate = document.getElementById('bitRate').value
        let channel = document.getElementById('channel').value
        console.log(audioCodecId)
        console.log(audioSampleRate)
        console.log(fileId)

        let source = new EventSource(`/audio?codecId=${audioCodecId}&sampleRate=${audioSampleRate}&fileId=${fileId}&bitRate=${bitRate}&channel=${channel}`);
        source.onmessage = function (e) {
            document.getElementById("console").innerHTML += e.data + "<br/>";
            console.log(e.data)
        };
        source.addEventListener("close", (e) => {
            document.getElementById("console").innerHTML += e.data + "<br/>";
            console.log(e.data);
            source.close()
        });

    }

    function uploadFile() {
        const fileInput = document.getElementById("uploadFile")

        const formData = new FormData();
        formData.append('file', fileInput.files[0]);

        fetch("/upload", {
            method: "POST",
            body: formData,
        }).then(response => {
            return response.json()
        }).then(data => {
            console.log(data)
            if (data.code === 0) {
                document.getElementById('fileId').value = data.fileId
                localStorage.setItem("fileId", data.fileId)
            }
        }).catch(error => {
            console.error(error)
        });
    }

</script>